<template>
  <div>
    <img :src="playList[playIndex].al.picUrl" alt="" class="bgImg"/>
    <div class="musicDetails-top">
      <div class="top">
        <div class="left">
          <div class="title ">

            <div class="name ">
              <svg t="1691053510888" class="icon"  @click="this.$router.go(-1)" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2259" width="200" height="200"><path d="M329.045333 137.685333a32 32 0 0 1 48.128 41.984l-2.858666 3.285334L215.893333 341.333333l158.421334 158.378667a32 32 0 0 1 2.858666 41.984l-2.858666 3.285333a32 32 0 0 1-41.984 2.858667l-3.285334-2.858667L148.053333 363.946667a32 32 0 0 1-2.858666-41.984l2.858666-3.242667 180.992-181.034667z" fill="#000000" p-id="2260"></path><path d="M640 309.333333a245.333333 245.333333 0 0 1 9.386667 490.496l-9.386667 0.170667H170.666667a32 32 0 0 1-4.352-63.701333L170.666667 736h469.333333a181.333333 181.333333 0 0 0 8.789333-362.453333L640 373.333333H170.666667a32 32 0 0 1-4.352-63.701333L170.666667 309.333333h469.333333z" fill="#000000" p-id="2261"></path></svg>              {{ playList[playIndex].al.name }}
            </div>
            <div class="author ">
                            <span v-for="item in playList[playIndex].ar" :key="item.id">{{
                                item.name
                              }}
                           </span>
              <span class="zuozhe"> {{playList[playIndex].ar.name}}</span>
            </div>
          </div>
        </div>
      </div>
      <div
          class="disk"
          v-if="!isLyricShow"
          @click="isLyricShow = !isLyricShow"
      >
        <img
            src="@/assets/needle-ab.png"
            alt=""
            class="needle"
            :class="{ 'needle-active': isPlayed }"
        />
        <img src="@/assets/cd.png" alt="" class="cd" />
        <img
            :src="playList[playIndex].al.picUrl"
            alt=""
            class="pic"
            :class="{
                        pic_active: isPlayed,
                        pic_paused: !isPlayed,
                    }"
            @click="update"
        />
      </div>
      <!-- 歌词 -->
      <div
          ref="musicLyric"
          class="music-lyric"
          v-if="isLyricShow"
          @click="isLyricShow = !isLyricShow"
      >
        <!-- {{lyric.lyric.split("\n")}} -->
<!--         {{ this.ly}}-->
        <p
            :class="{
                        active:
                            item.time <= currentTime &&
                            item.nextTime >= currentTime,
                    }"
            class="mt-4"
            v-for="(item, i) in lyricNew"
            :key="i"
        >
          {{ item}}
        </p>
      </div>
    </div>

  </div>
</template>

<script>
import {mapMutations, mapState} from "vuex";
import service from "@/components/request/request";
export default {
      name:"MusicDetails",
      props:{
        "toPlay":'',
        "playMusic":'',
      },
      components:{

      },
      data(){
        return{
          "ly":"",
          isLyricShow:false,
        }
      },
      methods:{
        update(){
          this.LYRIC(this.lyric)
        },
        backHome(){
          //回到主页
          this.SHOW();
        },
        lastMusic(){
          if (this.playList.length>1){
            let index=this.playIndex-1;
            if (index<0){
              index=this.playList.length-1;
            }
            this.UPDATE(true);
            this.INDEX(index);
          }
        },
        nextMusic(){
          if (this.playList.length > 1) {
            let index = this.playIndex + 1;
            if (index > this.playList.length - 1) {
              index = 0;
            }
            this.UPDATE(true);
            this.INDEX(index);
          }
        },
         async updateLyric() {
          const l= await service.get(`/lyric?id=${this.playList[this.playIndex].id}`)
           this.ly=l.data.lrc
         },
        ...mapMutations(["UPDATE","LIST","INDEX","SHOW","LYRIC"])
      },
      computed:{
        ...mapState(["playList",
          "playIndex",
          "isPlayed","detailShow",
          "isPlayed","lyric",
          "currentTime","duration"]),
        lyricNew() {
          let arr = this.ly.toString().split(/[(\r\n)\r\n]+/).map((item, i) => {
            let min = item.slice(1, 3);
            let second = item.slice(4, 6);
            let ms = item.slice(7, 10);
            let lrc = item.slice(11, item.length);
            let time = parseInt(min) * 60 + parseInt(second);
            if (isNaN(Number(ms))) {
              ms = item.slice(7, 9);
              lrc = item.slice(10, item.length);
            }
            // console.log(min, second, ms, lrc);
            return { min, second, ms, lrc, time };
          });
          // 最后还有一个多余 元素为空 会影响 time 的值我们删去他
          arr.splice(arr.length - 2, arr.length - 1);
          // 给每行歌词元素添加 下一行时间
          arr.forEach((item, i) => {
            if (i === arr.length - 1) {
              item.nextTime = this.duration;
            } else {
              item.nextTime = arr[i + 1].time;
            }
          });
          return arr;
        },
      },
      watch:{
        currentTime(){
          let p=document.querySelector("p.active");
          if (p){
            if (p.offsetTop>300){
              this.$refs.musicLyric.scrollTop=p.offsetTop-300;
            }
          }
          if (this.currentTime === this.duration){
            this.nextMusic()
          }
        }
      },
      mounted(props) {
        this.updateLyric()
        console.log(this.playList);
        this.lyricNew
      },
    }
</script>

<style lang="less" scoped>
.bgImg {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -1000;
  filter: blur(70px);
}
.musicDetails-top{
  .top{
    .left{
      .title{
        margin-top: 14px;
        margin-left: 26px;
        font-family: 华文宋体,serif;
        .name{
          width: 100%;
          font-size: 20px;
          color: white;
        }
        .author{
          width: 100%;
          font-size: 14px;
          .zuozhe{
            margin-left: 26px;
          }
        }
      }
    }
  }
  .disk{
    width:100%;
    height: 9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-top: 150px;
    .needle{
      width: 2rem;
      height: 3rem;
      position: absolute;
      margin-bottom: 120px;
      left: 46%;
      transform-origin: left top;
      transform: rotate(-30deg);
      transition: all 2s;
      z-index: 1;
    }
    .needle-active{
      width: 2rem;
      height: 3rem;
      position: absolute;
      margin-bottom: 120px;
      left: 46%;
      transform-origin: left top;
      transform: rotate(-16deg);
      transition: all 2s;
      z-index: 1;
    }
    .cd{
      position: absolute;
      width: 5rem;
      height: 5rem;
      z-index: -1;//放到图层最底部
    }
    .pic{
      width: 3.2rem;
      height: 3.2rem;
      border-radius: 50%;
      position: absolute;
      margin-top: 50px;
      z-index: 0;
      animation: router_ar linear infinite 10s;
    }
    .pic_active{
      animation-play-state: running;
    }
    .pic_paused{
      animation-play-state: paused;
    }
      @keyframes router_ar{
      0%{
        transform: rotateZ(0deg);
      }
      100%{
        transform: rotateZ(360deg);
      }
  }
  }
}
</style>